<template>
    <div class="frame-outer">
      <h2 style="text-align: left;padding-left:15px;">发帖</h2>
      <div class="form-bg">
        <el-form id="form-outer" :model="form" label-width="40px">
          <el-form-item label="标题">
            <el-input v-model="form.name" />
          </el-form-item>
          <el-form-item label="内容">
            <el-input v-model="form.content" type="textarea" rows="10"/>
          </el-form-item>
        <hr/>

        <el-form-item label="图片">
        <el-upload
            v-model:file-list="images"
            :action="staticServer"
            list-type="picture-card"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleImageRemove"
            :on-success="handleUploadImageSuccess"
            :limit="5"
            :on-exceed="handleExceedImage"
          >
          <el-icon><Plus /></el-icon>
          </el-upload>

          <el-dialog style="width:fit-content;height:fit-content" v-model="dialogVisible">
            <img width="200" :src="dialogImageUrl" alt="Preview Image" />
          </el-dialog>
        </el-form-item>

        <el-form-item label="文件">
          <el-upload
            v-model:file-list="files"
            class="upload-demo"
            :action="staticServer"
            multiple
            :on-remove="handleRemove"
            :limit="3"
            :on-success="handleUploadFileSuccess"
            :on-exceed="handleExceed"
          >
            <el-button type="primary">上传文件</el-button>
            <template #tip>
              <div class="el-upload__tip">
                注意文件大小不要超过10MB，推荐使用压缩格式，节省服务器资源~
              </div>
            </template>
          </el-upload>
        </el-form-item>
          <el-form-item label="墙">
          <el-select v-model="form.region" placeholder="请选择一个投递墙~">
            <el-option label="通知墙" value="0" />
            <el-option label="学习墙" value="1" />
            <el-option label="吐槽墙" value="2" />
            <el-option label="表白墙" value="3" />
          </el-select>
        </el-form-item>
        </el-form>
      </div>
      
      <button></button>
    </div>
  </template>
  <script>
  import config from "../../config/server.config.js";
  import { Plus } from '@element-plus/icons-vue'
  import { ElMessage } from "element-plus";
    export default {
      
      data(){
          return {
            dialogImageUrl:null,
            dialogVisible:false,
            staticServer:"",
            images:[],
            files:[],
            form:{
              title:"",
              content:"",
              type:"",
              tag:"",
              medias:[],
            }
          }
      },
  
      components:{
       
      },
  
      methods:{
        handleExceedImage(){
          ElMessage.warning(
              `图片限制为5份哦。`
            )
        },
        handlePictureCardPreview(uploadFile) {
            console.log(uploadFile)
            this.dialogImageUrl = uploadFile.url
            this.dialogVisible = true
            console.log(this.dialogImageUrl)
            console.log(this.dialogVisible)
          },

          handleImageRemove(uploadFile, uploadFiles){
            console.log(uploadFile, uploadFiles)
            console.log(this.images)
            console.log(this.form.medias)
          },
          handleUploadImageSuccess(response,uploadFile,uploadFiles){
            ElMessage.success(
              `上传文件成功！`
            )
              this.form.medias.push({
                "name":response[0]["path"],
                "url":response[0]["url"],
                "type":"image"
              })
            console.log("uploadFIleSuccess")
            console.log("params:",response,uploadFile,uploadFiles)
            console.log("images",this.images)
            console.log("medias",this.form.medias)
          },
          handleUploadFileSuccess(response,uploadFile,uploadFiles){
            ElMessage.success(
              `上传文件成功！`
            )
            this.form.files.push({
              "type":"file",
              "name":response[0]["path"],
              "url":response[0]["url"]
            })

            console.log("uploadFIleSuccess")
            console.log("params:",response,uploadFile,uploadFiles)
            console.log(this.files)
            console.log(this.form.medias)
          },
          
          handleRemove(uploadFile){
            console.log("file-remove-params",uploadFile)
            console.log("file-remove",this.files,this.form.medias)
            return ElMessageBox.confirm(
              `确定移除文件——${uploadFile.name}?`
            ).then(
              () => true,
              () => false
            )
          },

          handleExceed(files, uploadFiles){
            ElMessage.warning(
              `文件限制3份, 请使用压缩格式。`
            )
          }
      },
    
      mounted(){
        this.staticServer = config.STATICSERVER
      }
  }
  
    
  </script>
  <style scoped>
    .frame-outer{
      width: 100%;
      z-index: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: space-around;
      background-color: beige;
    }
  
   .form-bg{
    background-color: beige;
   }

   #form-outer{
      margin-top:  10px;
      margin-bottom:  10px;
      margin-left: 5px;
      margin-right: 5px;

  }

  ::v-deep .el-upload-list--picture-card .el-upload-list__item {
  width: 100px;
  height: 100px;
  line-height: 100px;
  }
  ::v-deep .el-upload-list--picture-card .el-upload-list__item-thumbnail {
    width: 100px;
    height: 100px;
    line-height: 100px;
  }
  ::v-deep .avatar {
    width: 100px;
    height: 100px;
  }
  
  </style>